<!doctype html>

<head>
    <title>Sphere Example</title>
    <script src="../dist/threebox.js" type="text/javascript"></script>
    <script src="config.js"></script>

    <script src='https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map' class='map'></div>

    <script>

        if (!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");

        mapboxgl.accessToken = config.accessToken;

        //starting location for both map and eventual sphere
        var origin = [102.1, 33.1, 500];

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v9',
            center: origin,
            zoom: 4,
            pitch: 30
        });
        map.on('style.load', function () {
            map.addLayer({
                id: 'custom_layer',
                type: 'custom',
                onAdd: function (map, mbxContext) {
                    tb = new Threebox(
                        map,
                        mbxContext,
                        { defaultLights: true }
                    );
                    window.sphere = tb.sphere({ color: 'red', material: 'MeshStandardMaterial' });
                    sphere.setCoords(origin);
                    sphere.geometry.scale(1000,1000,1000);
                    tb.add(sphere);
                },

                render: function (gl, matrix) {
                    tb.update();
                }
            })
        });

    </script>
</body>